<template>
  <div id="app">
    <!-- 未加载页面&&非iOS -->
    <div v-if="!isIframeLoaded&&!isiOS()" class="start-page">
      <div class="circle">
        <div class="logo" />
        <div class="rotate">
          <div class="spot" />
        </div>
      </div>
      <br>
      <div class="des">甜 心 外 卖</div>
    </div>
    <!-- 壳子部署到哪里都无所谓 -->
    <!-- 修改成为vue核心地址 -->
    <!-- 有定位&&非iOS -->
    <iframe v-if="isLocationed&&!isiOS()" :src="`http://121.40.218.127:8081/xcjc/customerIndex?lng=${location.lng}&lat=${location.lat}&ua=${ua}&page=${page}&shopId=${shopId}&shopAdressId=${shopAdressId}&orderId=${orderId}`" frameborder="0" @load="onload" />
    <!-- 是iOS -->
    <IOSDialog v-if="isiOS()" />

    <!-- 定位子页面 -->
    <!-- <iframe id="locationPlugin" src="https://zglzglzgl.gitee.io/location-plugin/" frameborder="0" /> -->
  </div>
</template>
<script>
import IOSDialog from '@/components/IOS-dialog.vue'
// import axios from 'axios'
export default {
  components: { IOSDialog },
  data() {
    return {
      isIframeLoaded: false,
      isLocationed: false,
      location: {
        lng: '',
        lat: ''
      },
      loadTimer: null,
      currentRate: 20,
      system_logo: '',
      ua: navigator.userAgent.toLowerCase(),
      page: null,
      shopId: null,
      shopAdressId: null,
      orderId: null
    }
  },
  watch: {
    // '$route': { //
    //   handler(to, from) {
    //     this.init()
    //   },
    //   immediate: true
    // }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    isiOS() {
      const u = navigator.userAgent
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      return isiOS
      // // return true || isiOS
      // return false && isiOS
    },
    init() {
      // 处理参数
      if (location.href.split('/#/')[1]) {
        const query = this.parseSearchParams(location.href.split('/#/')[1])
        query.page && (this.page = query.page)
        query.shopId && (this.shopId = query.shopId)
        query.shopAdressId && (this.shopAdressId = query.shopAdressId)
        query.orderId && (this.orderId = query.orderId)
      }

      // 显示loading
      this.createLoading()
      // 获取定位
      this.getLocation()
      // 获取system_logo
      // axios.get('http://116.62.214.202:7002/api/client/getCliSystemSettingInfo').then((response) => {
      //   this.system_logo = response.data.data.system_logo
      //   // this.system_logo = 'http://xcj-goods-pic.oss-cn-hangzhou.aliyuncs.com/egg-oss-demo/1675836769171.jpeg'
      //   document.getElementsByClassName('logo')[0].style.backgroundImage = `url(${this.system_logo})`
      //   console.log(this.system_logo)
      // }).catch((error) => { console.log(error) })
    },
    // iframe加载完成
    onload() {
      document.querySelector('.start-page').style.opacity = 0
      // document.querySelector('.start-page').style.transform = 'scale(5)'
      // window.setTimeout(() => {
      this.isIframeLoaded = true
      // }, 1000)
    },
    // 显示loading
    createLoading() {
    },
    // 获取定位
    getLocation() {
      // let BMap = window.BMapGL
      // const that = this
      // eslint-disable-next-line
      AMap.plugin('AMap.Geolocation', () => {
        // eslint-disable-next-line
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 是否使用安卓定位sdk用来进行定位，需要安卓端sdk配合
          useNative: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000
        })

        geolocation.getCurrentPosition((status, result) => { // 获取用户当前的精确位置
          // alert(status)
          // alert(JSON.stringify(result))
          this.isLocationed = true
          if (status == 'complete') {
            this.location.lng = result.position.lng
            this.location.lat = result.position.lat
            // alert(JSON.stringify(result.position.lng))
            // alert(JSON.stringify(result.position.lat))
            // alert(JSON.stringify(result.addressComponent.township))
            // alert(JSON.stringify(result.formattedAddress))
            // alert(result.formattedAddress.split(result.addressComponent.township)[1])
            // window.parent.postMessage(JSON.stringify(result), '*')
            // that.showCode = result.adcode.substring(0, 4)
            // if (that.showCode.length === 4) {
            //   this.surePosition(result.position[0], result.position[1])
            // } else {
            //   that.showCity = '未获取定位'
            //   that.getServiceType(0)
            // }
          } else {
            console.log('定位失败')
            // alert('失败')
          }
        })
      })
    },
    parseSearchParams(searchParamsString) {
      return searchParamsString.split('&').reduce((searchParams, curKV) => {
        const [k, v] = curKV.split('=').map(decodeURIComponent)
        searchParams[k] = v
        return searchParams
      }, {})
    }

  }
}
</script>

<style lang="scss">
#app{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background-size: 100%;
  // padding: 30px 25px;
  box-sizing: border-box;
  // 启动页面
  .start-page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    transform: scale(0.6);
    // transform-origin: center;
    // loading
    .circle{
      position: relative;
      width: 100px;
      height: 100px;
      margin-top: -100px;
      // background: #fd5e00;
      // background: url('http://xcj-goods-pic.oss-cn-hangzhou.aliyuncs.com/egg-oss-demo/1675836769171.jpeg');
      // background: url('https://bpic.51yuansu.com/pic3/cover/03/30/07/5b7fcc1820e74_610.jpg');
      // background-size: 120% 120%;
      .logo{
        position: absolute;
        left: 7px;
        top: 7px;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        background: url('~@/assets/logo.png');
        background-size: 125% 125%;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .rotate {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 50%;
        animation: circle 3s infinite linear;
        display: flex;
        align-items: center;
        justify-content: center;
        .spot{
          width: 8px;
          height: 8px;
          background: #27b105;
          margin: 0 auto;
          position: absolute;
          top: -5px;
          border-radius: 50%;
        }
      }
      @keyframes circle {
        0% {
            transform: rotate(-360deg);
        }
        100% {
            transform: rotate(0deg);
        }
      }
    }
    .des{
      font-size: 30px;
      margin-top: 10px;
    }

  }
  iframe{
    width: 100%;
    height: 100%;
  }
}
</style>
